<template>
	<section>
		<!--start header-->
		<header>
			<div class="main clearfix">
				<router-link to="/index" class="logoA fl">
					<img src="../../assets/img/云商蓝.png"  style="margin-top: 8%" height="70%" width="90" alt=""/>
				</router-link>
				<div class="fr">
					<div class="exit fr">
						<span class="iconfont">&#xe631;</span>
						<span>退出</span>
					</div>
					<div class="account fr" @click="block">
						<span class="iconfont">&#xe6e3;</span>
						<span>返回</span>
					</div>
				</div>
			</div>
		</header>
		<!--end header-->
		<!--start content-->
		<div class="box">
			<div class="content">
				<div class="nav">
					<ul>
						<!--<li><em class="iconfont">&#xe7cc;</em>付款记录</li>-->
						<li class="acrtive"><em class="iconfont">&#xe677;</em>购买服务</li>
						<!--<li><em class="iconfont">&#xe64e;</em>申请发票</li>-->
						<!--<li><em class="iconfont">&#xe654;</em>发票记录</li>-->
					</ul>
				</div>
				<div class="paySerice" res="paySerice" v-if="vue_xuanze">
					<h2 class="biaoti">
						购买服务
					</h2>
					<div class="serice">
						<label class="mingpian2">
							免费版：5用户
							<span>
								永久免费
							</span>
						</label>
						<div class="xuanze">
							<span>到期时间：永久</span>
							<span>用户数：5用户</span>
							<span>剩余短信：0条<span>免费版不支持短信发送功能</span></span>
							<div>
								<a @click="vue_xuanze=false,vue_active=true">购买标准版</a><a @click="vue_xuanze=false,vue_active=false,many=zhuanye">购买专业版</a>
							</div>
						</div>
					</div>
				</div>
				<div class="paySerice" res="paySerice" v-else>
					<h2 class="biaoti">
						云商服务订购
					</h2>
					<div class="serice">
						<div  style="overflow: hidden;">
							<label class="mingpian" :class="{activeMpin:vue_active}" @click="vue_active=true,many=biaozhun">
								标准版：不限用户数
								<span>
									￥{{biaozhun}}年
								</span>
							</label>
							<label class="mingpian" :class="{activeMpin:!vue_active}" @click="vue_active=false,many=zhuanye" style="margin-left: 20px;">
								专业版：不限用户数
								<span>
									￥{{zhuanye}}年
								</span>
							</label>
						</div>
						<div class="payxuanze" style="clear: both;margin-top: 60px;">
							<ul class="paysty">
								<li class="payLi"><span>服务期限</span>
									<a :class="{activePay:vue_activePay}" @click="mianShu=vue_one,vue_activePay=true,vue_activePay2=false,vue_activePay3=false">{{vue_one}}年</a>
									<a :class="{activePay:vue_activePay2}" @click="mianShu=vue_two,vue_activePay2=true,vue_activePay=false,vue_activePay3=false">{{vue_two}}年</a>
									<a :class="{activePay:vue_activePay3}" @click="mianShu=vue_three,vue_activePay3=true,vue_activePay=false,vue_activePay2=false">{{vue_three}}年</a>
								</li>
								<li><span>应付金额</span>￥{{mianShu*many}} </li>
								<li>
									<el-checkbox v-model="vue_checked">开具发票</el-checkbox>
								</li>
							</ul>
							<div v-if="vue_checked">
								<ul class="pastUl">
									<li>
										<span>发票类型</span>
										<el-radio-group v-model="vue_radio">
										    <el-radio :label="1">电子发票(普通发票)</el-radio>
										    <el-radio :label="2">增值税普通发票 </el-radio>
										    <el-radio :label="3">增值税专用发票</el-radio>
										</el-radio-group>
									</li>
									<li>
										<span>发票内容</span>
										<input type="text" value="服务费" disabled="disabled"/>
									</li>
									<li>
										<span>发票抬头</span>
										<input type="text" value="" />
									</li>
									<li>
										<span style="margin-left: -24px;">纳税人识别号</span>
										<input type="text" value="" />
									</li>
									<li v-if="vue_radio=='1'">
										<span>电子邮箱</span>
										<input type="text" value="" />
									</li>
									<li v-if="vue_radio=='3'">
										<span>注册地址</span>
										<input type="text" value="" />
									</li>
									<li v-if="vue_radio=='3'">
										<span>注册电话</span>
										<input type="text" value="" />
									</li>
									<li v-if="vue_radio=='3'">
										<span>开户银行</span>
										<input type="text" value="" />
									</li>
									<li v-if="vue_radio=='3'">
										<span>银行账号</span>
										<input type="text" value="" />
									</li>
								</ul>
								<div style="border-top:1px solid #ccc ;padding-top: 20px;margin-top: 20px;">
									<ul class="youji">
										<li>发票寄送<a @click="dialogFormVisible = true">修改</a></li>
										<li><span style="margin-left: 10px;">收件人</span>夏先生</li>
										<li><span>联系电话</span>13311730162</li>
										<li><span>邮政编码</span>000000</li>
										<li><span>邮寄地址</span>中国 天津 天津市 河东区 宝山区</li>
										<li><span>寄送方式</span><span style="color: #f50;">订单满6800元，免费寄送发票。付款后一周内寄出。</span></li>
									</ul>
								</div>
							</div>
							<a class="downDan">立即下单</a>
							<div class="fapiao">
								<el-dialog title="修改发票收件地址" :visible.sync="dialogFormVisible">
								  <el-form :model="form">
								    <el-form-item label="收件人" :label-width="formLabelWidth">
								      <el-input v-model="form.name" auto-complete="off"></el-input>
								    </el-form-item>
								    <el-form-item label="联系电话" :label-width="formLabelWidth">
								      <el-input v-model="form.name" auto-complete="off"></el-input>
								    </el-form-item>
								    <el-form-item label="邮政编码" :label-width="formLabelWidth">
								      <el-input v-model="form.name" auto-complete="off"></el-input>
								    </el-form-item>
								    <el-form-item label="邮寄地址" :label-width="formLabelWidth">
								      <el-input v-model="form.name" auto-complete="off"></el-input>
								    </el-form-item>
								  </el-form>
								  <div slot="footer" class="dialog-footer">
								    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
								    <el-button @click="dialogFormVisible = false">取 消</el-button>
								  </div>
								</el-dialog>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<!--end content-->
		<!--start footer-->
		<footer>
			<div class="main">
				<span class="fl">Copyright © 2015 深圳市铱云云计算有限公司</span>
				<span class="fr">粤ICP备13071670-2</span>
			</div>
		</footer>
		<!--end footer-->
	</section>
</template>


<script>
	export default {
	    data() {
	      return {
	      	vue_xuanze:true,
	      	vue_activePay:true,
	      	vue_activePay2:false,
	      	vue_activePay3:false,
	      	vue_active:true,
	       	vue_checked:false,
	    	vue_radio:1,
	    	vue_one:1,
	    	vue_two:2,
	    	vue_three:3,
	    	biaozhun:6800,
	    	zhuanye:9800,
	    	many:6800,
	    	mianShu:1,
	    	dialogFormVisible: false,
	    	form:[],
	    	formLabelWidth: '120px'
	      }
	    },
	    computed:{

	    },
	    methods:{
	    	block(){		//返回
	    		window.location.hash = "#/index";
	    	},
//	    	btnBiaoZhun(){
//
//	    	},
	    },
	    watch:{

	    },
//	    components:{dialogBox},
	    mounted(){


	    	document.querySelector('body').style.cssText = 'background:#fff';
			document.querySelector(".paySerice").style.minHeight = (document.documentElement.clientHeight-130) + 'px';
	    },
	    destroyed(){
	    	document.querySelector('body').style.cssText = 'background:#E9ECF3';
	    }
  	}
</script>

<style scoped>
*{
	/*transition:.2s;*/
}
a{
	cursor: pointer;

}
a:hover{
	opacity: .8;
}
section{
	height: 100%!important;
}
 header {
 	width: 100%;
 	height: 50px;
 	line-height: 46px;
 	background-color:#32383E;
 	z-index: 999;
 }
 .main {
 	width: 1000px;
 	margin:auto;
 }
 .logoA {
 	height: 50px;
 }
 .exit,.account {
 	color:#fff;
 	cursor: pointer;
 	transition: .2s;
 	vertical-align:middle;
 }
 .exit span,.account span{
 	vertical-align:middle;
 }
 .exit:hover,.account:hover {
 	color:#03B8CC;
 }
 .exit {
 	margin-left: 40px;
 }
 .content {
 	width: 1000px;
 	margin: 0px auto;
 	color: #333;
 }
 .nav{
 	width: 180px;
 	float: left;
 	margin-top: 80px;
 }
 .nav li{
 	height: 45px;
 	line-height: 45px;
 	text-align: center;
 	font-size: 16px;
 	color: #555;
 }
 .nav li em{
 	margin-right: 10px;
 }
 .nav li:hover{
 	background: #13C19F;
 	color: #fff;
 }
 .acrtive{
 	background: #13C19F;
 	color: #fff!important;
 }
 footer{
 	bottom: 0;
 	left: 0;
 	width: 100%;
 	height: 80px;
 	line-height: 80px;
 	z-index: 999;
 	background: #fff;
 }
 .paySerice{
 	background: #fff;
 	float: left;
 	width: 820px;
 }
 .biaoti{
 	font-size: 26px;
    padding: 50px 40px;
    font-family: "Microsoft Yahei";
    font-weight: normal;
 }
 .box{
 	width: 100%;
 	background: #eaebed;
 	overflow: hidden;
 }
 .serice{
 	padding-top:40px ;
 	margin:0  40px;
 	border-top: 1px solid #ddd;
 	overflow: hidden;
 }
 .mingpian2{
 	display: block;
 	height:140px ;
 	width: 257px;
 	border: 2px solid #ff7d00;
 	box-sizing: border-box;
 	padding: 26px;
 	font-size: 14px;
 	float: left;
 	cursor: pointer;

 }
 .mingpian2 span{
 	font-size: 45px;
 	display: block;
 	font-size: 45px;
 	color: #ff7d00;
 }
 .mingpian{
 	display: block;
 	height:140px ;
 	width: 257px;
 	border: 2px solid #555;
 	box-sizing: border-box;
 	padding: 26px;
 	font-size: 14px;
 	float: left;
 	color: #555;
 	cursor: pointer;
 }
 .mingpian span{
 	font-size: 45px;
 	display: block;
 	color: #555;
 }
.activeMpin{
	color: #333;
	border-color: #ff7d00;
 	background: url(../../assets/img/gougouin.png) right bottom no-repeat;
}
.activeMpin span{
	color: #ff7d00;
}
 .xuanze{
 	float: left;
 	margin-left: 50px;
 }
 .xuanze > span{
 	display: block;
 	line-height: 28px;
 	font-size: 14px;
 }
 .xuanze > span span{
 	color: #999;
 	margin-left: 5px;
 }
 .xuanze > div a{
 	color: #FFF;
 	display: inline-block;
 	background: #13C19F;
 	padding: 5px 10px;
 	font-size: 14px;
 	margin-right: 20px;
 	border-radius: 2px;
 	margin-top: 10px;
 }
 .paysty{
 	margin-left: 30px;
 }
 .paysty li{
 	height: 45px;
 	line-height: 45px;
 }
 .paysty li span{
 	margin-right: 10px;
 }
 .payLi a{
 	background: #fff;
    cursor: pointer;
    line-height: 28px;
    width: 68px;
    height: 28px;
    border: 1px solid #c8c8c8;
    display: inline-block;
    margin-right: 10px;
    text-align: center;

 }
.payLi .activePay{
	border-color:#FF7D00;
	background: url(../../assets/img/gou.png) right bottom no-repeat;
}
 .downDan{
 	display: block;
 	width: 120px;
 	height: 35px;
 	line-height: 35px;
 	background: #13C19F;
 	color: #fff;
	border-radius:2px;
	text-align: center;
	margin-left: 50px;
	margin-top: 20px;
 }
 .pastUl{
 	margin-left: 30px;
 }
 .pastUl li{
 	height: 45px;
 	line-height: 45px;
 }
 .pastUl li span{
 	margin-right: 10px;
 }
 .pastUl li input{
 	width: 220px;
 	padding: 5px 12px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #d6dee3;
    color: #555;
    vertical-align: middle;
    outline: none;
 }
 .youji li{
 	height: 25px;
 	line-height: 25px;
 }
 .youji li span{
 	margin-right: 10px;
 	color: #999;
 }
 .youji li a{
 	margin-left: 10px;
 	color: #13C19F;
 }
</style>
